<template>
    <div v-loading="loading" style="width: 100%;">
        <SavePage :title="`${typeName}年度预算`">
            <template slot="buttons">
                <BaseButton :loading="btnLoading" :disabled="submitDisabled" @click="submit()">保存</BaseButton>
            </template>
            <template slot="body">
                <TitleTips title="基本信息" :required="true" />
                <el-form ref="form" :model="form" class="size-auto" :rules="rules" :inline="true" size="medium" label-width="86px">
                    <el-row :gutter="24">
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="年度" prop="year">
                                <el-date-picker
                                    v-model="form.year"
                                    type="year"
                                    value-format="yyyy"
                                    placeholder="请选择"
                                    style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="归属单位" prop="orgs">
                                <el-cascader
                                    v-model="form.orgs"
                                    :props="{ value: 'key', label: 'value' }"
                                    :options="orgOptions"
                                    clearable
                                    :show-all-levels="false"
                                    placeholder="请选择"
                                    style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>             
                </el-form>
                <TitleTips title="预算内容" />
                <FormItem ref="formItem" :data="form" :type="type"  :loading.sync="loading" />
                <TitleTips title="预算文件" />
                <FileUpload ref="fileUpload" :list="form.budgetFile" @load="handleLoad" />
            </template>
        </SavePage>
    </div>
</template>

<script>
import { BudgetingModel } from '@/models'
import FormItem from './components/FormItem'
import FileUpload from '@/components/FileUpload'

export default {
    name: 'StandingBookAdd',
    components: {
        FormItem,
        FileUpload
    },
    data() {
        return {
            loading: true,
            submitDisabled: false,
            model: new BudgetingModel(),
            form: {
                year: '',
                subordinateUnits: '',
                subordinateUnitsName: '',
                budgetFile: [],
                orgs: []
            },
            rules: {
                year: [{ required: true, message: '请选择年度', trigger: 'change' }],
                orgs: [{ required: true, message: '请选择归属单位', trigger: 'change' }],
            },
            type: 'add',
            typeName: '新建',
            btnLoading: false,
            orgOptions: []
        }
    },
    async created() {
        this.getOrgAll()
        this.type = this.$route.query.type
        if (this.type === 'edit') {
            this.typeName = '编辑'
            this.loading = true
            this.getDetail()
        } else if (this.type === 'add') {
            this.typeName = '新建'
            this.loading = false
        }
    },
    methods: {
        // 获取所属单位
        getOrgAll() {
            this.model.managementTree().then((res) => {
                this.orgOptions = res || []
            })
        },
        handleLoad(value) {
            console.log(value)
            this.submitDisabled = value
        },
        // 获取编辑时需要的详情数据
        getDetail() {
            this.model.detail({ id: this.$route.query.id }).then(res => {
                this.form = res
                this.form.year = res.year.toString()
                console.log('this.form.year>>>', this.form.year)
                this.form.budgetFile = this.form.budgetFile ? JSON.parse(this.form.budgetFile) : []
                // 选择昭通高速时，subordinateUnits没有值，回显要单独处理下
                this.form.orgs = res.subordinateUnits ? [res.subordinateUnitsType, res.subordinateUnits] : [res.subordinateUnitsType]
            }).finally(() => {
                this.loading = false
            })
        },
        submit() {
            this.btnLoading = true
            this.$refs['form'].validate(async valid => {
                if (valid) {
                    const res = await this.$refs['formItem'].handleValidate()
                    console.log('res>>>', res)
                    const budgetFile = JSON.stringify(this.$refs['fileUpload'].getFileList())
                    if (res) {
                        const [subordinateUnitsType = null, subordinateUnits = null] = this.form.orgs
                        const data = {
                            ...this.form,
                            ...this.$refs['formItem'].form,
                            subordinateUnitsType,
                            subordinateUnits,
                            budgetFile
                        }
                        this.model.saveOrUpdate(data).then(() => {
                            this.$message({
                                type: 'success',
                                message: '操作成功！',
                                duration: 500,
                                onClose: () => {
                                    this.$router.go(-1)
                                }
                            })
                        }).finally(() => {
                            this.btnLoading = false
                        })
                    } else {
                        this.btnLoading = false
                    }
                } else {
                    this.btnLoading = false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.el-form--inline.size-auto.width-100 {
    ::v-deep {
        // form的label-width：72px 根据实际label宽度修改
        .el-form-item__content {
            width: calc(100% - 100px);
        }
    }    
}
.margin-b-0 {
    margin-bottom: 0;
}
.add-box {
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-bottom: 24px;
    background: rgb(250, 250, 250);
    border: 1px solid #F5F7FA;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    &:hover {
        background: rgb(240, 240, 240);
    }
    i {
        color: #171725;
        font-style: normal;
    }
}
</style>
